<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			canvas{
				display: block;
				box-shadow: 0 0 20px black;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<canvas id="" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.querySelectorAll("canvas")[0];
		var ctx = canvas.getContext('2d');
		
		function Snake(ctx){
			if (!ctx) {return}
			this.ctx = ctx;
			this.snakeLength = 3;
			this.w = 10;
			this.h = 10;
			this.snakeArr = [];    //蛇身数组
			
			this.dir = 39;   //移动方向
			this.cw = this.ctx.canvas.width;
			this.ch = this.ctx.canvas.height;
			this.food = null;
			this.x = -10;
			this.y = 0;
			this.num = 0;
			
			this._move();
			this.evt();
			this.createFood();
			this.score();
		}
		Snake.prototype.move = function(){        //蛇移动
			switch (this.dir){
				case 39:
				this.x += this.w;
					break;
				case 37:
				this.x -= this.w;
					break;
				case 38:
				this.y -= this.h;
					break;
				case 40:
				this.y += this.h;
					break;
			}
		}
		Snake.prototype.score = function(){
			this.ctx.font = '15px Arial';
			this.ctx.textBaseline = 'top';
			this.ctx.fillStyle = 'red';
			this.ctx.fillText('得分：'+this.num,230,0);
		}
		
		
		Snake.prototype.setSnake = function(){     //用来操作蛇身数组
			this.snakeArr.push({
				x:this.x,
				y:this.y
			})
			if (this.snakeArr.length>this.snakeLength) {
				this.snakeArr.shift();
			}
		}
		Snake.prototype.draw = function(){        //画出蛇
			this.setSnake();
			for (var i = 0; i < this.snakeArr.length; i++) {
				var item = this.snakeArr[i];
				this.ctx.strokeRect(item.x,item.y,this.w,this.h);
				this.ctx.fillStyle = 'brown';
				this.ctx.fillRect(item.x,item.y,this.w,this.h);
			}
			this.ctx.fillStyle = 'red';
			this.ctx.fillRect(this.x,this.y,this.w,this.h);
		}
		
		
		Snake.prototype.createFood = function(){         //创建食物
			var x = this.rand(0,this.cw/this.w)*this.w;
			var y = this.rand(0,this.ch/this.h)*this.h;
			var bol = false;
			for (var i = 0; i < this.snakeArr.length; i++) {
				var item = this.snakeArr[i];
				if (item.x == x && item.y ==y) {
					bol = true;
					break;
				}
			}
			if (bol) {
				this.createFood();
			}else{
				this.food = {x:x,y:y};
			}
		}
		
		Snake.prototype.rand = function(min,max){   //随机位置
			return parseInt(Math.random()*(max-min))+min;
		}
		
		
		Snake.prototype._drawFood = function(){       //添加食物
			this.ctx.fillStyle = 'blue';
			this.ctx.fillRect(this.food.x,this.food.y,this.w,this.h);
		}
		
		
		Snake.prototype._move = function(){        //定时器任务
			var that = this;
			this.inter = setInterval(function(){
				that.move();
				
				if (that.x+that.w > that.cw || that.y+that.h >that.ch || that.x < 0 || that.y <0) {     //碰壁
					clearInterval(that.inter);
					return;
				}
				if (that.x == that.food.x && that.y == that.food.y) {      //吃到食物
					that.snakeLength++;
					that.num++;
					that.createFood();
				}
				for (var i = 0; i < that.snakeArr.length; i++) {          //蛇身碰撞
					var item = that.snakeArr[i];
					if (item.x == that.x && item.y == that.y) {
						clearInterval(that.inter);
						return;
					}
				}
				that.ctx.clearRect(0,0,that.cw,that.ch);
				that.draw();
				that._drawFood();
				that.score();
			},100)
		}
		
		
		Snake.prototype.evt = function(){        //键盘事件
			var that = this;
			document.onkeydown = function(ev){
				if (ev.keyCode<37 || ev.keyCode>40) {
					return false;
				}
				var val = Math.abs(ev.keyCode - that.dir);
				if(val==2){
					return false;
				}
				that.dir = ev.keyCode;
			}
		}
		var snake = new Snake(ctx);
		
		
	</script>
</html>